<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#a {
				width: 50px;
				height: 50px;
				background: red;
				
			}
		</style>
	</head>

	<body>
		<div id="a"></div>
		<script src="../jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			/*是给div元素添加键盘按下事件：
												  1.获取按下的是哪个键
												  2.获取元素在页面上的位置（left，top）
												  3.根据按下的哪个键来判断操作
												  3.1若按下的是左边箭头:设置元素的偏移量：offset({top:top,left:left-1})
												          若按下往右边的箭头:offset({top:top,left:left+1})*/
			var ele = $('#a');
			$(document).keydown(
				function() {
					//获取按下的是哪个键
					var opt = event.which;
					//获取元素在当前页面上的位置
					var left = ele.offset().left;
					var top = ele.offset().top;
					switch(opt) {
						    //左边
						case 37:
							ele.offset({
								top: top,
								left: left - 10
							});
							break;
							//上边
						case 38:
							ele.offset({
								top: top - 10,
								left: left
							});
							break;
							//右边	
						case 39:
							ele.offset({
								top: top,
								left: left + 10
							});
							break;
							//下边	
						case 40:
							ele.offset({
								top: top + 10,
								left: left
							});
							break;
					}
				}
			)
		</script>
	</body>

</html>